<template>
	<view class="container">
		<navbar :title="pageType == 1 ? '佣金明细':'提现记录'"></navbar>
		<view class="wrap">
			<view class="list-wrap" v-if='list.length > 0'>
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<template v-if='pageType == 1'>
						<view class="top">
							<view class="title">{{item.scene_text}}</view>
							<text>{{item.money}}元</text>
						</view>
						<view class="top bottom">
							<view class="time">{{item.remark}}</view>
							<text class="time">{{item.create_time}}</text>
						</view>
					</template>
					<template v-else>
						<view class="top">
							<view class="title"><text>提现</text><view class="status status1 line-center">{{item.state_text}}</view></view>
							<text>-{{item.price}}</text>
						</view>
						<view class="top bottom">
							<view class="time">{{item.create_time}}</view>
							<text class="time">手续费：¥{{item.service_charge}}</text>
						</view>
					</template>
				</view>
				<loading :loadEnd='loadEnd'></loading>
			</view>
			<view v-else>
				<no-data></no-data>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				page:1,
				totalPage:'',
				list:[],
				total:0,
				loadEnd:false,
				pageType:1,
			};
		},
		onLoad(option) {
			this.pageType = option.type ? option.type : 1;
			this.getRecord()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getTeam()
			} else {
				return;
			}
		},
		onPullDownRefresh() {
			this.list = [];
			this.page = 1;
			this.totalPage = '';
			this.getRecord();
			uni.stopPullDownRefresh()
		},
		methods:{
			getRecord(){
				let that = this;
				let api = that.pageType == 1 ? app.getApi().promotion.commssionList : app.getApi().promotion.cashList;
				app.globalRequest({
					api,
					data:{
						page: this.page,
						limits: 15,
					}
				}).then(res => {
					if (res.code == 0) {
						that.list = that.list.concat(res.data.data);
						that.totalPage = res.data.last_page;
						that.total = res.data.total;
						if (that.totalPage == that.page) {
							that.loadEnd = true;
						}
					}
				}).catch(err => {
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrap{
		margin:0 24rpx;
		padding-bottom: 80rpx;
		.list-item{
			width:100%;
			height: 148rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding:0 32rpx;
			box-sizing: border-box;
			margin-top:24rpx;
			.top{
				display: flex;
				justify-content: space-between;
				.title{
					font-weight: bold;
					display: flex;
					align-items: center;
					.status{
						min-width: 84rpx;
						height: 32rpx;
						padding:0 12rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						font-weight: normal;
						font-size: 20rpx;
						margin-left:20rpx;
					}
					.status1{
						color:#2865BE;
						background: #E6EEFF;
					}
					.status2{
						color:#52B148;
						background: #ECF8ED;
					}
					.status3{
						color:#FF7040;
						background: #FEF2EE;
					}
					.status4{
						color:#FE3C5E;
						background: #FFF1F3;
					}
				}
				text{
					font-size: 32rpx;
					color:#FF3B30;
					font-weight: bold;
				}
			}
			.bottom{
				margin-top:16rpx;
				.time{
					color:#B3B3B3;
					font-weight: normal;
					font-size: 24rpx;
				}
			}
		}
	}

</style>
